<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="./css/zTreeStyle.css" type="text/css">
  <link rel="stylesheet" href="./css/dt/jquery.dataTables.min.css" type="text/css">
  <link rel="stylesheet" href="./css/iStock.picker.css" type="text/css">

  <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="./js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="./js/jquery.ztree.all.min.js"></script>
  
  
  <script type="text/javascript" src="./js/iStock.picker.js"></script>
  <style>
    form {
      width: 300px;
      padding: 10px;
      margin: 0 auto;
    }
    form .item {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>

    <form>
      <div class="item">
          <label>单选：</label>
          <div id="selectNormal"></div>
      </div>

      <div class="item">
          <label>单选(过滤)：</label>
          <div id="selectFilter"></div>
      </div>
      
      <div class="item">
          <label>多选：</label>
          <div id="selectNormalMulti"></div>
      </div>

      <div class="item">
          <label>下拉树(单选)：</label>
          <div id="selectTree"></div>
      </div>

      <div class="item">
          <label>下拉树(多选)：</label>
          <div id="selectTreeMulti"></div>
      </div>
    
      <div class="item">
          <label>下拉表格(单选)：</label>
          <div id="selectTable"></div>
      </div>

      <div class="item">
          <label>下拉表格(多选)：</label>
          <div id="selectTableMulti"></div>
      </div>

    </form>

<script type="text/javascript">
$(document).ready(function () {
  var picker = $("#selectNormal").SimplePicker({
      name:"nice",
      defaultValue: '1',
      data:[
        {value:"1",name:"a","senvon":"123"}
        ,{value:"2",name:"b","senvon":"abc"}
        ,{value:"3",name:"c"}
        ,{value:"4",name:"d"}
        ,{value:"5",name:"e"}
      ],
      onselect:function(data){
        console.log(data);
      }
  });
  console.log("==========="+picker.getValue());
  
  $("#selectFilter").SimplePicker({
      name:"1",
      mode:"single",
      filter:true,
      data:[
        {value:"1",name:"a"}
        ,{value:"2",name:"b"}
        ,{value:"3",name:"c"}
        ,{value:"4",name:"d"}
        ,{value:"5",name:"e"}
      ],
      onselect:function(data){
        console.log(data);
      }
  });

  $("#selectNormalMulti").SimplePicker({
      name:"2",
      defaultValue: '1,2,3',
      mode:"multi",
      data:[
        {value:"1",name:"a","senvon":"123"}
        ,{value:"2",name:"b","senvon":"abc"}
        ,{value:"3",name:"c"}
        ,{value:"4",name:"d"}
        ,{value:"5",name:"e"}
      ],
      onselect:function(data){
        console.log(data);
      }
  });

  $("#selectTree").TreePicker({
      name:"3",
      mode:"single",
      defaultValue: '1',
      data:[
          {id:1, pId:0, name:"北京", value: '0'},
          {id:2, pId:0, name:"天津", value: '1'},
          {id:3, pId:0, name:"上海", value: '2'},
          {id:6, pId:0, name:"重庆", value: '3'},
          {id:4, pId:0, name:"河北省", value: '4', open:true, nocheck:true},
          {id:41, pId:4, name:"石家庄", value: '5'},
          {id:42, pId:4, name:"保定", value: '6'},
          {id:43, pId:4, name:"邯郸", value: '7'},
          {id:44, pId:4, name:"承德", value: '8'},
          {id:5, pId:0, name:"广东省", value: '9', open:true, nocheck:true},
          {id:51, pId:5, name:"广州", value: '10'},
          {id:52, pId:5, name:"深圳", value: '11'},
          {id:53, pId:5, name:"东莞", value: '12'},
          {id:54, pId:5, name:"佛山", value: '13'},
          {id:6, pId:0, name:"福建省", value: '14', open:true, nocheck:true},
          {id:61, pId:6, name:"福州", value: '15'},
          {id:62, pId:6, name:"厦门", value: '16'},
          {id:63, pId:6, name:"泉州", value: '17'},
          {id:64, pId:6, name:"三明", value: '18'}
      ],
      onselect:function(data){
        console.log(data);
      }
  });

  $("#selectTreeMulti").TreePicker({
      name:"4",
      mode:"multi",
      defaultValue: '0,6,10',
      data:[
          {id:1, pId:0, name:"北京", value: '0'},
          {id:2, pId:0, name:"天津", value: '1'},
          {id:3, pId:0, name:"上海", value: '2'},
          {id:6, pId:0, name:"重庆", value: '3'},
          {id:4, pId:0, name:"河北省", value: '4', open:true, nocheck:true},
          {id:41, pId:4, name:"石家庄", value: '5'},
          {id:42, pId:4, name:"保定", value: '6'},
          {id:43, pId:4, name:"邯郸", value: '7'},
          {id:44, pId:4, name:"承德", value: '8'},
          {id:5, pId:0, name:"广东省", value: '9', open:true, nocheck:true},
          {id:51, pId:5, name:"广州", value: '10'},
          {id:52, pId:5, name:"深圳", value: '11'},
          {id:53, pId:5, name:"东莞", value: '12'},
          {id:54, pId:5, name:"佛山", value: '13'},
          {id:6, pId:0, name:"福建省", value: '14', open:true, nocheck:true},
          {id:61, pId:6, name:"福州", value: '15'},
          {id:62, pId:6, name:"厦门", value: '16'},
          {id:63, pId:6, name:"泉州", value: '17'},
          {id:64, pId:6, name:"三明", value: '18'}
      ],
      onselect:function(data){
        console.log(data);
      }
  });
  
  $("#selectTable").TablePicker({
      name:"5",
      mode: 'single',
      defaultValue: '2',
      columns: [
        {title: '年龄', key: 'age', width: '25%'},
        {title: '姓名', key: 'name', width: '30%'},
        {title: '身高', key: 'height', width: '45%'}
      ],
      data:[
        {value: '1', name: 'aaa', age: 12, height: '120cm'},
        {value: '2', name: 'bbb', age: 12, height: '120cm'},
        {value: '3', name: 'ccc', age: 12, height: '120cm'},
        {value: '4', name: 'ddd', age: 12, height: '120cm'},
        {value: '5', name: 'eee', age: 12, height: '120cm'}
      ],
      onselect:function(data){
        console.log(data);
      }
  });

  $("#selectTableMulti").TablePicker({
      name:"6",
      mode: 'multi',
      defaultValue: '2,4',
      filter: true,
      columns: [
        {title: '年龄', key: 'age'},
        {title: '姓名', key: 'name'},
        {title: '身高', key: 'height'}
      ],
      data:[
        {value: '1', name: 'aaa', age: 12, height: '120cm'},
        {value: '2', name: 'bbb', age: 12, height: '120cm'},
        {value: '3', name: 'ccc', age: 12, height: '120cm'},
        {value: '4', name: 'ddd', age: 12, height: '120cm'},
        {value: '5', name: 'eee', age: 12, height: '120cm'},
        {value: '6', name: 'aaa', age: 12, height: '120cm'},
        {value: '7', name: 'bbb', age: 12, height: '120cm'},
        {value: '8', name: 'ccc', age: 12, height: '120cm'},
        {value: '9', name: 'ddd', age: 12, height: '120cm'},
        {value: '10', name: 'eee', age: 12, height: '120cm'},
      ],
      onselect:function(data){
        console.log(data);
      }
  });
});
</script>	
</body>


</html>